<template>
    <div class="main-content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="query" ref="query" slot="form" label-width="80px" label-position="right" >
                <el-row :gutter="41">
                    <el-col :span="8">
                        <!-- <el-form-item label="学校名称" prop="schoolId">
                            <el-select v-model="query.schoolName" clearable filterable remote reserve-keyword placeholder="请输入" :remote-method="remoteMethod" :loading="schoolLoading" style="width:100%">
                                <el-option v-for="item in schoolList" :key="item.pId" :label="item.sName" :value="item.sName">
                                </el-option>
                            </el-select>
                            
                        </el-form-item> -->
                        <el-form-item label="学校名称" prop="schoolName">
                            <school v-model="query.schoolName" style="width:100%" @change='schoolChange'></school>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button type="primary" class="top-btn" @click="searchData">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title">
            </div>
            <el-table :data="tableList" v-loading="loading" style="width: 100%" @expand="btnChild">
                <el-table-column label="学校">
                    <template scope="scope">
                        <span>{{scope.row.sSchoolName?scope.row.sSchoolName:'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称">
                    <template scope="scope">
                        <span>全部卡券</span>
                    </template>
                </el-table-column>
                <el-table-column label="卡券量（条）">
                    <template scope="scope">
                        <span>{{scope.row.sCardCouponsNum}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" type="expand">
                    <template scope="props">
                        <el-table :data="tableDataChild[props.$index]" style="width: 100%" :show-header="false">
                            <el-table-column label="学校">
                                <template scope="scope">
                                    <span></span>
                                </template>
                            </el-table-column>
                            <el-table-column label="商品名称">
                                <template scope="scope">
                                    <span>{{ !scope.row.s_name?'--':scope.row.s_name}}</span>
                                </template>
                            </el-table-column>

                            <el-table-column label="卡券量（条）">
                                <template scope="scope">
                                    <span>{{scope.row.allnum}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="150">
                                <template scope="scope">
                                    <el-button type="text" class="btn-success"  v-if="scope.row.allnum=='0' && scope.row.isShow=='0'"
                                    @click="goToBuy(props.row.fSchoolId, scope.row.p_id)">购买</el-button>

                                    <span class="" v-if="scope.row.allnum=='0' && scope.row.isShow=='1'">--</span>

                                    <el-button type="text" class="btn-success" v-if="scope.row.allnum!='0' && scope.row.isShow=='0' "
                                    @click="goToCheck(props.row.fSchoolId, scope.row.p_id, props.row.sSchoolName, scope.row.s_name)">查看</el-button>
                                    
                                    <el-button type="text" class="btn-success" v-if="scope.row.allnum!='0' && scope.row.isShow=='0' "
                                    @click="goToBuy(props.row.fSchoolId, scope.row.p_id)">购买</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" 
                :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" :page-size="config.pageSize" 
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
    import Levelbar from '../../layout/Levelbar';
    import TableLayout from 'components/TableLayout';
    import province from 'components/CascadeRegion/province';
    import city from 'components/CascadeRegion/city';
    import region from 'components/CascadeRegion/region';
    import school from 'components/SchoolClasss/school';
    import {listCardServiceInfo, listCardNumsBySchoolType, listSchoolAllInfo} from 'api/cardCoupons';
    import { mapState, mapActions } from 'vuex';

    export default {
        name: 'cardDetailList',
        components: { Levelbar, TableLayout, province, city, region, school },
        data() {
            return { 
                loading: true,  
                schoolLoading: false,
                schoolList: [],
                tableList: [], // 外table
                tableDataChild: [], // 内table
                pageQuery: {
                    page: 1,
                    total: 0
                },
                query: {
                    schoolName: '',
                    schoolId: ''
                }
            }
        },
        created() {
            this.queryData();
        },
        watch: {// 局部刷新列表 2018-1-10 by cuihd
            cacheUpdated(val) {
                val && this.queryData();
            }
        },
        computed: {
            ...mapState({
                config: state => state.config.table,
                cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表 2018-1-10 by cuihd
            })
        },
        filters: {
            dateFilter(val) {
                if (val) {
                    return val.substring(0, 19)
                } else {
                    return '--'
                }              
            }
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.page = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            searchData() {
                this.pageQuery.page = 1;
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.page = val;
                this.queryData();
            },
            remoteMethod(query) {
                if (query) {
                    listSchoolAllInfo(query).then(response => {
                        this.schoolList = response.data.content;
                    }).catch(Error => {
                        this.$message.error(Error)
                    })
                } else {
                    this.schoolList = [];
                    this.query.schoolName = '';
                }
            },
            // 卡券服务列表子列表
            btnChild(row, expanded) {
                if (expanded) {
                    this.loading = true;
                    listCardNumsBySchoolType(row.fSchoolId).then(res => {
                        this.loading = false;
                        if (res.data.content) {
                            let index = this.tableList.indexOf(row);
                            this.tableDataChild[index] = null;
                            this.tableDataChild.splice(index, 1, res.data.content);
                        }
                    });
                }
            },
          

            // 卡券服务列表
            queryData() {
                this.loading = true;
                listCardServiceInfo(this.query.schoolId, this.pageQuery.page, this.config.pageSize).then(response => {
                    this.tableList = response.data.content.list;
                    this.pageQuery.total = response.data.content.pagination.total;
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                });
            },
            // 查看按钮
            goToCheck(schoolId, serviceId, sSchoolName, sServiceName) {  
                this.$router.push({ path: `extend/${schoolId}/${serviceId}/${sSchoolName}/${sServiceName}`});
            },
            // 购买
            goToBuy(schoolId, serviceId) {              
                this.$router.push({ path: `cardBuy/${schoolId}/${serviceId}`});
            },
            // 获取学校id
            schoolChange(val) {
                this.query.schoolId = val
            }
        }

    }
</script>

<style lang="scss" scoped>
    
</style>

